<template>
  <div class="container">
    <div class="app-container">
      <pageTools :show-before="true">
        <template v-slot:before>有9条考勤审批尚未处理</template>
        <template v-slot:after>
          <el-button
            size="mini"
            type="danger"
            @click="exportAttenance"
            >导出</el-button
          >
<!--          <el-button size="mini" type="warning">提醒</el-button>-->
          <el-button size="mini" type="primary" @click="handleSet"
            >设置</el-button
          >
          <el-button
            size="mini"
            type="default"
            @click="$router.push('/attendances/archiving/')"
            >历史归档</el-button
          >
          <!-- <el-button size="mini" type="primary" @click="$router.push({'path':'/attendances/report/'+ yearMonth})">{{ yearMonth }}报表</el-button> -->
        </template>
      </pageTools>
      <el-card>
        <el-form ref="formData" :model="formData">
          <el-form-item label="部门：" label-width="120px">
            <el-checkbox-group v-model="attendanceQyery.departmentId">
              <el-checkbox
                v-for="item in departments"
                :key="item.id"
                :label="item.id"
                @change="checkboxChange(item.id)"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 考勤列表 -->
      <el-card style="margin-top: 15px">
        <div
          style="
            width: 100%;
            position: relative;
            overflow-x: auto;
            overflow-y: hidden;
          "
        >
          <div>

            <table
              border="0"
              align="center"
              cellpadding="0"
              cellspacing="0"
              class="tableInfo"
              v-loading="loading"
            >
              <tr>
                <th width="50">序号</th>
                <th width="100">姓名</th>
                <th width="100">工号</th>
                <th width="200">部门</th>
                <th width="100">手机</th>
                <th v-for="(it, ind) in monthOfReport" :key="ind" width="100">
                  {{ formatDate(it.day) }}
                </th>
              </tr>
              <tr v-for="(item, index) in attendInfo.list" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ item.username }}</td>
                <td>{{ item.workNumber }}</td>
                <td>{{ item.department }}</td>
                <td>{{ item.mobile }}</td>
                <td
                  v-for="(it, ind) in item.attendancerecordList"
                  :key="ind"
                  width="110"
                  @click="showChangeDialog(item, ind, it)"
                >
                  <span v-if="it.adtStatu === 0" style="color: #8c939d">休息</span>
                  <span
                    v-if="it.adtStatu === 1"
                    style="
                      color: white;
                      background-color: rgb(103, 194, 58);
                      display: block;
                    "
                    >正常</span
                  >
                  <span v-if="it.adtStatu === 2" style="color: red">旷工</span>
                  <span
                    v-if="it.adtStatu === 3"
                    style="
                      color: white;
                      background-color: rgb(230, 162, 60);
                      display: block;
                    "
                    >迟到</span
                  >
                  <span v-if="it.adtStatu === 4">早退</span>
                  <span v-if="it.adtStatu === 5">外出</span>
                  <span v-if="it.adtStatu === 6">出差</span>
                  <span v-if="it.adtStatu === 7">年假</span>
                  <span v-if="it.adtStatu === 8">事假</span>
                  <span v-if="it.adtStatu === 9">病假</span>
                  <span v-if="it.adtStatu === 10">婚假</span>
                  <span v-if="it.adtStatu === 11">丧假</span>
                  <span v-if="it.adtStatu === 12">产假</span>
                  <span v-if="it.adtStatu === 13">奖励产假</span>
                  <span v-if="it.adtStatu === 14">陪产假</span>
                  <span v-if="it.adtStatu === 15">探亲假</span>
                  <span v-if="it.adtStatu === 16">工伤假</span>
                  <span v-if="it.adtStatu === 17">调休</span>
                  <span v-if="it.adtStatu === 18">产检假</span>
                  <span v-if="it.adtStatu === 19">流产假</span>
                  <span v-if="it.adtStatu === 20">长期病假</span>
                  <span v-if="it.adtStatu === 21">测试架</span>
                  <span v-if="it.adtStatu === 22">补签</span>
                  <span v-if="it.adtStatu == null">-</span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <el-dialog :visible.sync="centerDialogVisible" width="30%" center>
          <span slot="title" style="color: black"
            >{{ modifyData.day }}（实际工作日考勤方案）</span
          >
          <div class="attenInfo">
            <p class="colRed">注：统计考勤时，异常状态优先正常状态</p>
            <p class="check">
              <el-radio-group v-model="modifyData.adtStatu">
                <el-radio
                  v-for="item in stateData.vacationtype"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </p>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="btnOK">确定</el-button>
            <el-button @click="centerDialogVisible = false">取消</el-button>
          </span>
        </el-dialog>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          align="middle"
          justify="center"
          style="height: 60px"
        >
          <el-pagination
            :page-size="page.pagesize"
            :current-page="this.page.page"
            layout="prev, pager, next"
            :total="page.total"
            @current-change="pageChange"
          />
        </el-row>
      </el-card>
      <!-- 设置组件 -->
      <attendanceSet ref="set"></attendanceSet>
    </div>
  </div>
</template>
<script>
import pageTools from "./components/page-tools.vue";
import attendanceSet from "./components/attendance-set.vue";
import { getDepartment } from "@/api/department";
import { getAttendancesList, updateAttendanceStatus,exportAttendanceSetting } from "@/api/attendance";
import FileSaver from "file-saver";
import fa from "element-ui/src/locale/lang/fa";
export default {
  data() {
    return {
      departments: [],
      stateData: {
        // 假期类型
        holidayType: [
          {
            id: "0",
            value: "休息",
            isEnable: false,
          },
          {
            id: "1",
            value: "正常",
            isEnable: false,
          },
          {
            id: "2",
            value: "旷工",
            isEnable: false,
          },
          {
            id: "3",
            value: "事假",
            isEnable: false,
          },
          {
            id: "4",
            value: "调休",
            isEnable: false,
          },
          {
            id: "5",
            value: "迟到",
            isEnable: false,
          },
          {
            id: "6",
            value: "早退",
            isEnable: false,
          },
        ],
        vacationtype: [
          {
            id: "0",
            name: "休息",
          },
          {
            id: "1",
            name: "正常",
          },
          {
            id: "2",
            name: "旷工",
          },
          {
            id: "3",
            name: "迟到",
          },
          {
            id: "4",
            name: "早退",
          },
          {
            id: "5",
            name: "外出",
          },
          {
            id: "6",
            name: "出差",
          },
          {
            id: "7",
            name: "年假",
          },
          {
            id: "8",
            name: "事假",
          },
          {
            id: "9",
            name: "病假",
          },
          {
            id: "10",
            name: "婚假",
          },
          {
            id: "11",
            name: "丧假",
          },
          {
            id: "12",
            name: "产假",
          },
          {
            id: "13",
            name: "奖励产假",
          },
          {
            id: "14",
            name: "陪产假",
          },
          {
            id: "15",
            name: "探亲假",
          },
          {
            id: "16",
            name: "工伤假",
          },
          {
            id: "17",
            name: "调休",
          },
          {
            id: "18",
            name: "产检假",
          },
          {
            id: "19",
            name: "流产假",
          },
          {
            id: "20",
            name: "长期病假",
          },
          {
            id: "21",
            name: "测试假",
          },
          {
            id: "22",
            name: "补签",
          },
        ],
        type: [
          {
            leaveType: "60000",
            name: "年假",
            isEnable: false,
          },
          {
            leaveType: "60100",
            name: "事假",
            isEnable: false,
          },
          {
            leaveType: "60200",
            name: "病假",
            isEnable: false,
          },
          {
            leaveType: "60300",
            name: "婚假",
            isEnable: false,
          },
          {
            leaveType: "60400",
            name: "丧假",
            isEnable: false,
          },
          {
            leaveType: "60500",
            name: "产假",
            isEnable: false,
          },
          {
            leaveType: "60600",
            name: "奖励产假",
            isEnable: false,
          },
          {
            leaveType: "60700",
            name: "陪产假",
            isEnable: false,
          },
          {
            leaveType: "60800",
            name: "探亲假",
            isEnable: false,
          },
          {
            leaveType: "60900",
            name: "工伤假",
            isEnable: false,
          },
          {
            leaveType: "61000",
            name: "调休假",
            isEnable: false,
          },
          {
            leaveType: "61100",
            name: "产检假",
            isEnable: false,
          },
          {
            leaveType: "61200",
            name: "流产假",
            isEnable: false,
          },
          {
            leaveType: "61300",
            name: "长期病假",
            isEnable: false,
          },
          {
            leaveType: "61400",
            name: "测试假",
            isEnable: false,
          },
        ],
        departmentType: [
          {
            dedTypeCode: "51000",
            name: "迟到扣款",
            isEnable: false,
            departmentId: "",
            periodLowerLimit: "30", // 时间段下限
            periodUpperLimit: "30", // 时间段上限
            timesLowerLimit: "2", // 次数下限
            timesUpperLimit: "2", // 次数上限
            dedAmonutLowerLimit: "30", // 扣款金额下限
            dedAmonutUpperLimit: "0", // 扣款金额上限
            absenceDays: "0.5", // 旷工天数
            fineSalaryMultiples: "2", // 罚款工资倍数
            absenceTimesUpperLimt: "0", // 旷工次数上限
          },
          {
            dedTypeCode: "52000",
            name: "早退扣款",
            isEnable: false,
            departmentId: "",
            periodLowerLimit: "30", // 时间段下限
            periodUpperLimit: "30", // 时间段上限
            timesLowerLimit: "2", // 次数下限
            timesUpperLimit: "2", // 次数上限
            dedAmonutLowerLimit: "30", // 扣款金额下限
            dedAmonutUpperLimit: "0", // 扣款金额上限
            absenceDays: "0.5", // 旷工天数
            fineSalaryMultiples: "2", // 罚款工资倍数
            absenceTimesUpperLimt: "0", // 旷工次数上限
          },
          {
            dedTypeCode: "53000",
            name: "旷工扣款",
            isEnable: false,
            departmentId: "",
            periodLowerLimit: "30", // 时间段下限
            periodUpperLimit: "30", // 时间段上限
            timesLowerLimit: "2", // 次数下限
            timesUpperLimit: "2", // 次数上限
            dedAmonutLowerLimit: "30", // 扣款金额下限
            dedAmonutUpperLimit: "0", // 扣款金额上限
            absenceDays: "0.5", // 旷工天数
            fineSalaryMultiples: "2", // 罚款工资倍数
            absenceTimesUpperLimt: "0", // 旷工次数上限
          },
        ],
        overtimeType: [
          {
            // id: '1',
            departmentId: "", // 部门ID
            rule: "工作日可申请加班", // 规则内容
            ruleStartTime: "", // 规则生效每日开始时间
            ruleEndTime: "", // 规则生效每日结束时间
            isTimeOff: false, // 是否调休
            isEnable: false, // 是否可用
          },
          {
            // id: '2',
            departmentId: "", // 部门ID
            rule: "休息日可申请加班", // 规则内容
            ruleStartTime: "", // 规则生效每日开始时间
            ruleEndTime: "", // 规则生效每日结束时间
            isTimeOff: false, // 是否调休
            isEnable: false, // 是否可用
          },
          {
            // id: '3',
            departmentId: "", // 部门ID
            rule: "法定节假日可申请加班", // 规则内容
            ruleStartTime: "", // 规则生效每日开始时间
            ruleEndTime: "", // 规则生效每日结束时间
            isTimeOff: false, // 是否调休
            isEnable: false, // 是否可用
          },
        ],
      },
      formData: {
        page: 1,
        pagesize: 10,
        keyword: this.keyword,
        deptID: [], // 性别
        stateID: "",
      },
      attendanceQyery: {
        pageNum: 1,
        pageSize: 10,
        departmentId: [],
        adtStatu: null,
      },
      page: {
        page: 1,
        pagesize: 10,
        total: 140,
      },
      modifyData: {
        userId: "",
        day: "",
        adtStatu: "",
      },
      updateAttendanceStatusForm: {
        userId: "",
        day: "",
        adtStatu: "",
      },
      attendInfo: {},
      monthOfReport: {},
      centerDialogVisible: false,
      loading: true,
    };
  },
  name: "Attendance",
  components: {
    pageTools,
    attendanceSet,
  },
  created() {
    this.getDepartment();
    this.getAttendancesList(this.attendanceQyery);
  },
  methods: {
    async exportAttenance(){
      const result =  await exportAttendanceSetting();
      FileSaver.saveAs(result, "员工信息表.xlsx"); // 下载文件
    },
    async getDepartment() {
      this.loading = true;
      this.departments = await getDepartment();
      // this.loading = false;
    },
    async getAttendancesList() {
      this.loading = true
      this.attendInfo = await getAttendancesList(this.attendanceQyery);
      this.monthOfReport = this.attendInfo.list[0].attendancerecordList;
      this.loading = false
    },
    formatDate(dateString) {
      // 将 "20240501" 转换为 "2024-05-01"
      const formattedDateString = dateString.replace(
        /(\d{4})(\d{2})(\d{2})/,
        "$1-$2-$3"
      );
      const date = new Date(formattedDateString);

      if (isNaN(date.getTime())) {
        return "Invalid Date"; // 如果日期无效，返回错误提示
      }

      const month = date.getMonth() + 1;
      const day = date.getDate();
      const dayOfWeek = date.getDay();

      const formattedDate = `${month}/${day}`;

      if (dayOfWeek === 0) {
        return `${formattedDate}(日)`;
      } else if (dayOfWeek === 6) {
        return `${formattedDate}(六)`; // 周六显示 "(六)" 标记
      } else {
        return formattedDate;
      }
    },
    pageChange(page) {
      this.attendanceQyery.pageNum = page;
      this.attendanceQyery.pageSize = 10;
      this.getAttendancesList(this.attendanceQyery); // 获取数据
    },
    showChangeDialog(item, ind, it) {
      // console.log(item);
      // console.log(ind);
      // console.log(it);
      this.modifyData.day =
        it.day.substr(0, 4) +
        "-" +
        it.day.substr(4, 2) +
        "-" +
        it.day.substr(6, 2);
      this.modifyData.adtStatu = String(it.adtStatu);
      this.modifyData.userId = it.userId;
      this.centerDialogVisible = true;

      this.updateAttendanceStatusForm.userId = this.modifyData.userId;
      this.updateAttendanceStatusForm.day = it.day;
    },
    async btnOK() {
      this.updateAttendanceStatusForm.adtStatu = this.modifyData.adtStatu;
      await updateAttendanceStatus(this.updateAttendanceStatusForm);
      this.$message.success("修改成功");
      this.centerDialogVisible = false;
      this.getAttendancesList(); // 获取数据
    },
    handleSet() {
      this.$refs.set.dialogFormV();
    },
    checkboxChange(id){
      console.log(id)
      this.attendanceQyery.departmentId = id
      this.getAttendancesList(this.attendanceQyery);
    }
  },
};
</script>
<style scoped>
.circular{
  color: aquamarine;
}
.tableInfo {
  line-height: 36px;
  border: solid 1px #ebeef5;
  border-right: 0 none;
  border-bottom: 0 none;
  tr {
    th {
      height: 50px;
      text-align: center;
      border-right: solid 1px #ebeef5;
      border-bottom: solid 1px #ebeef5;
      border-bottom: 2px solid #e8e8e8;
      background: #fafafa;
      min-width: 100px;
    }
    td {
      height: 36px;
      text-align: center;
      border-right: solid 1px #ebeef5;
      border-bottom: solid 1px #ebeef5;
    }
  }
}
.attenInfo {
  p {
    &.check {
      padding: 20px 0 0;
    }
    .el-radio {
      display: inline-block;
      width: 60px;
      padding: 5px 0;
    }
  }
}
</style>
